<!--  -->
<template>
	<view class="course-item">
		<view class="top-row flex-box">
			<view @click="topClick" class="left flex-box">
				<view class="jlbicon"></view>
				<view class="club-name">
					{{title}}
				</view>
				<!-- <van-icon name="arrow" size="15px" color="#CCCCCC" /> -->
				<image v-if="arrowShow" class="icon-arrow" src="" mode=""></image>
			</view>
			<view class="right status">
				{{status}}
			</view>
		</view>
		<view @click="handleClick" class="course-info flex-box">
			<template v-if="type=='2'">
				<view class="left circle" >
					<image v-if="coachIcon" :src="coachIcon" mode="aspectFill"></image>
					<image v-else :src="'@/static/images/image-default.png'|addBaseImgUrl" />
				</view>
			</template>
			<template v-else-if="type=='3'">
				<view class="left">
		<!-- 			<image v-if="coachIcon" :src="coachIcon" mode="aspectFill"></image> -->
					<image :src="'@/static/images/vip.png'|addBaseImgUrl" />
				</view>
			</template>
			<template v-else>
				<view class="left" >
					<image :src="iconUrl" mode="aspectFill"></image>
					<view class="small" v-if="actType=='2'">
						<view>赛事</view>
					</view>
				</view>
			</template>
			<view class="right">
				<view class="">
					<view class="title-price flex-box">
						<view class="course-title line-clamp-2">
							{{name}}
						</view>
						<view class="course-price">
							￥<text>{{price}}</text>
						</view>
					</view>
					<view class="place_now line-clamp-1">
						{{placeName}}
					</view>
					<view class="huismall" v-if="type=='1'">{{datetit(actStartDate)}} {{week=="1"?'周一':week=="2"?'周二':week=="3"?'周三':week=="4"?'周四':week=="5"?'周五':week=="6"?'周六':week=="0"?'周日':''}} {{actStartTime.slice(0,5)+'-'+actEndTime.slice(0,5)}}</view>
					<view class="jibie" v-if="type=='1'">
						<view class="man">{{'男L'+actLevelStart+'-L'+actLevelEnd}}</view>
						<view class="woman">{{'女L'+girlLevelStart+'-L'+girlLevelEnd}}</view>
					</view>
					<view class="venue_one" v-if="type=='1'">
						<slot name="btn-row"></slot>
					</view>
					<view class="venue">
						{{content}}
					</view>
				</view>
				<view class="tags flex-box" v-if="type=='2'">
					<view v-for="(item,index) in tagsArr" :key="index" class="lit-tag" >
						{{item}}
					</view>
					<slot name="btn-row"></slot>
				</view>
				<view class="tags_end flex-box" v-if="type=='3'">
					<view></view>
					<slot name="btn-row"></slot>
				</view>
			</view>
		</view>
		<!-- <view v-if="true" class="btn-row">
			<view v-for="(item, index) in btnArr" :key="index" @click.stop="toAppoint(item.event)" class="btn-appoint">
				{{item.text}}
			</view>
		</view> -->
	</view>
</template>

<script>
	/**
	 * item
	*/
   import { rili } from '@/common/js/util.js'
	export default {
		name: 'XjxItem',
		props: {
			title: {
				type: String,
				default: ''
			},
			type:{//类型 1活动 2课程 3会员
				type: String,
				default: ''
			},
			actType:{//活动类型 1日常 2赛事
				type: String,
				default: ''
			},
			placeName:{//场馆地址
				type: String,
				default: ''
			},
			arrowShow: {
				type: Boolean,
				default: false
			},
			clubId: {
				type: [String,Number],
				default: ''
			},
			status: {
				type: String,
				default: ''
			},
			iconUrl: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			},
			price: {
				type: [String,Number],
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			tagsArr: {
				type: Array,
				default: []
			},
			actLevelStart:{
				type: [String,Number],
				default: ''
			},
			actLevelEnd:{
				type: [String,Number],
				default: ''
			},
			girlLevelStart:{
				type: [String,Number],
				default: ''
			},
			girlLevelEnd:{
				type: [String,Number],
				default: ''
			},
			actStartDate:{//开始日期
				type: [String,Number],
				default: ''
			},
			actStartTime:{//时间段开始时间
				type: [String,Number],
				default: ''
			},
			actEndTime:{//时间段结束时间
				type: [String,Number],
				default: ''
			},
			coachIcon:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				week: rili.getweekDay(this.$props.actStartDate),
				weekName:this.weeknames(this.week)
			}
		},
		onLoad(){},
		computed:{},
		methods:{
			weeknames(a) {
				let text = '';
				switch (a) {
					case '1':
						text = '周一';
						break;
					case '2':
						text = '周二';
						break;
					case '3':
						text = '周三';
						break;
					case '4':
						text = '周四';
						break;
					case '5':
						text = '周五';
						break;
					case '6':
						text = '周六';
						break;
					case '0':
						text = '周日';
						break;
				}
				return text;
			},
			datetit(a){
				let date = a.split("-");
				return `${date[1]}月${date[2]}日`
			},
			handleClick(){
				this.$emit('click')
			},
			topClick(){
				if(this.arrowShow&&this.clubId){
					uni.navigateTo({
						url: '/mainProcess/club/detail/detail?id='+this.clubId
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.course-item{
		min-height: 180rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx 22rpx 20rpx;
		.top-row{
			height: 30rpx;
			.left{
				align-items: center;
				.club-name{
					font-size: 26rpx;
					margin-right: 16rpx;
          color: #999;
				}
				.icon-arrow{
					width: 12rpx;
					height: 20rpx;
          background: url();
          background-size: 100% 100%;
        }
				.jlbicon{
					width:32rpx;
					height: 32rpx;
					background:url('@/static/images/icon-vipcard-club.png') no-repeat;
					background-size:100% 100%;
					margin-right:12rpx;
				}
			}
			.right{
				color: #FDB42E;
				font-size: 26rpx;
				line-height: 30rpx;
				position: relative;
			}
		}
		.course-info{
			min-height: 130rpx;
			margin-top: 20rpx;
			align-items: stretch;
			.left{
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				flex: 0 0 auto;
				background-color: #F2F2F2;
				border-radius: 15rpx;
				position: relative;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
					vertical-align: middle;
					border-radius: 15rpx;
				}
				.small{
					position: absolute;
					left: 0;
					top:0;
					width: 68rpx;
					text-align: center;
					view{
						padding: 0 10rpx;
						background-color: #FDE3DC;
						color: #F77350;
						height: 32rpx;
						line-height: 29rpx;
						border-radius: 5rpx;
						color:#F77350;
						font-size: 24rpx;
					}
				}
			}
			.circle{
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}
			.right{
				flex: 1 0 auto;
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				.title-price{
					align-items: flex-start;
					.course-title{
						line-height: 30rpx;
						max-width: 340rpx;
            font-size: 30rpx;
            margin-bottom: 20rpx;
					}
					.course-price{
						font-size: 24rpx;
						line-height: 38rpx;
						text{
							font-size: 30rpx;
						}
					}
				}
				.venue{
					font-size: 26rpx;
					color: $text-color-grey;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.tags{
					justify-content: space-between;
					align-items: center;
					.lit-tag{
						// margin-top: 13rpx;
					}
				}
				.tags_end{
					justify-content: flex-end;
				}
				.place_now{
					width: 300rpx;
					font-size: 24rpx;
          line-height: 24rpx;
          line-height: 24rpx;
          margin-bottom: 20rpx;
					color: #999999;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.huismall{
					font-size: 24rpx;
          line-height: 24rpx;
					margin-bottom: 20rpx;
					color: #999999;
				}
				.jibie{
					width: 100%;
					display: flex;
					.man{
            display: flex;
            align-items: center;
            height: 31rpx;
						background-color:transparent!important;
						border:1px solid #C8DBFF;
						color:#2E87FF!important;
						margin-right: 10rpx;
						font-size: 22rpx;
						border-radius: 3px;
						padding: 0 8rpx;
					}
					.woman{
            display: flex;
            align-items: center;
            height: 31rpx;
						background-color:transparent!important;
						border:1px solid #FFC8C3;
						color:#E14806;
						font-size: 22rpx;
						border-radius: 3px;
						padding: 0 8rpx;
					}
				}
				.venue_one{
					margin-top: 10rpx;
				}
			}
		}
		// .btn-row{
		// 	margin-top: 30rpx;
		// 	display: flex;
		// 	justify-content: flex-end;
		// 	.btn-appoint{
		// 		width: 245rpx;
		// 		height: 72rpx;
		// 		background: rgba(46, 135, 255, 0);
		// 		border: 2rpx solid $public-color-blue1;
		// 		color: $public-color-blue1;
		// 		line-height: 68rpx;
		// 		text-align: center;
		// 		border-radius: 36px;
		// 	}
		// }
	}
</style>
